<template>
  <van-popup
    v-model:show="show"
    position="bottom"
    round
    class="popup-container-style"
  >
    <van-field
      placeholder="请输入搜索字段"
      v-model="keyWord"
      left-icon="search"
      :model-value="pickerValue"
      @update:model-value="onSearch(keyWord)"
    />
    <van-picker
      :columns="inList"
      @cancel="onCancel"
      @confirm="onConfirm"
    />
  </van-popup>
</template>

<script setup>
import { ref, onMounted, onUpdated, onBeforeUpdate } from 'vue';
const show = defineModel('show');

const props = defineProps({
  columns: Array, // 全部列表
  pickerValue: Object,
})

const emit = defineEmits(['cancel', 'confirm']);

const keyWord = ref('');
const inList = ref([]);// 用于下拉框的数据

const onSearch = (key) => {
  inList.value = props.columns.filter(e => {
    if (e.text.match(key)) {
      return e
    }
  })
}

const onCancel = () => {
  initPicker();
  emit('onCancel');
  show.value = false;
}
const onConfirm = ({ selectedValues, selectedOptions }) => {
  initPicker();
  emit('confirm', { selectedValues, selectedOptions });
  console.log('emit-onConfirm');
  show.value = false;
}

const initPicker = () => {
  keyWord.value = '';
  inList.value = [...props.columns];
};

onBeforeUpdate(() => {
  // console.log('onBeforeUpdate');  
  initPicker();
})
</script>

<style scoped></style>